<template>
  <div style="position: relative">
    <el-drawer
      v-model="props.releaseVisible"
      :title="title"
      size="40%"
      @close="handleClose"
    >
      <el-form
        :inline="true"
        :model="submitFrom"
        label-width="auto"
        ref="ReleaseRef"
        :rules="rules"
        label-position="top"
      >
        <el-form-item prop="content" required style="width: 100%">
          <el-input
            type="textarea"
            v-model.trim="submitFrom.content"
            placeholder="请输入"
            :autosize="{ minRows: 35 }"
            @keydown.enter.prevent="handleEnter"
          />
        </el-form-item>
        <el-form-item style="width: 100%" v-if="props.isRelease">
          <div class="release_box">
            <el-button type="primary" @click="handleSure(0)"
              >保存为模板</el-button
            >
            <div>
              <el-button type="primary" @click="handleSure(1)">发布</el-button>
              <el-button type="primary" @click="handleClose">取消</el-button>
            </div>
          </div>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>
<script setup>
import { ref, defineProps, defineEmits, onMounted, watch } from "vue";
const emits = defineEmits(["handleClose", "handleSure"]);
const { proxy } = getCurrentInstance();
const title = ref(""); //名称
const props = defineProps({
  releaseVisible: {
    type: Boolean,
    default: false,
  },
  // 传值数据对象
  publicFrom: {
    type: Object,
    default: {},
  },
  // 集合判断
  assemble: {
    type: Boolean,
    default: false,
  },
  isRelease: {
    type: Boolean,
    default: true,
  },
});
const submitFrom = ref({
  content: "",
});
const rules = reactive({
  content: [{ required: true, message: "请输入", trigger: "blur" }],
});

watch(
  () => props.releaseVisible,
  () => {
    if (!props.releaseVisible) return;
    title.value = props.isRelease ? "发布配置" : "发布日志";
    if (props.assemble) {
      releaseLogs(); // 赋值数据：发布日志
    } else {
      getTemplate(); // 赋值数据：发布配置
    }
  }
);
const getTemplate = () => {
  //发布配置
  // site.general
  //   .websitepublishrecordGettemplatebywebsiteid({
  //     pathParams: {
  //       id: proxy.publicFrom.id,
  //     },
  //   })
  //   .then((res) => {
  //     submitFrom.value.content = res.data?.content;
  //   });
};
const releaseLogs = () => {
  //发布日志
  site.general
    .websitepublishrecordGetbyid({
      pathParams: {
        id: props.publicFrom.id,
      },
    })
    .then((res) => {
      if (props.isRelease) {
        submitFrom.value.content = res.data?.envContent;
      } else {
        submitFrom.value.content = res.data?.logContent;
      }
    });
};
const handleClose = () => {
  emits("handleClose");
  proxy.resetForm("ReleaseRef");
};
const handleSure = (index) => {
  proxy.$refs["ReleaseRef"].validate((valid) => {
    if (!valid) return;
    if (index) {
      proxy.$modal.confirm("是否确认此配置发布？").then(() => {
        site.general
          .sitewebsitePublishwebsite({
            pathParams: {
              id: props.publicFrom.websiteId || props.publicFrom.id,
            },
            data: submitFrom.value,
          })
          .then((res) => {
            if (res.code !== 200) return;
            proxy.resetForm("ReleaseRef");
            emits("handleSure");
            proxy.$modal.msgSuccess("站点正在发布中，请稍后查看");
          });
      });
    } else {
      site.general
        .websitepublishrecordUpdatepublishtemplate({
          data: submitFrom.value,
        })
        .then((res) => {
          if (res.code !== 200) return;
          proxy.$modal.msgSuccess("模板已保存");
        });
    }
  });
};
const handleEnter=(event)=> {
  // 在消息末尾添加换行符
  submitFrom.value.content += '\n';
  // 移动光标到末尾
  event.target.selectionStart = event.target.selectionEnd = submitFrom.value.content.length;
}
</script>
<style lang="scss" scoped>
.release_box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
</style>